<template>
	<div style="text-align: center;width: 100%;margin: 50px 50px 20px 50px;">
		<el-input ref="input" v-model="keyword" placeholder="搜索" size="large"
				  style="width: 500px"
				  clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @keyup.enter="inputChange"/>
	</div>
	<div class="sc-search" style="text-align: center;">
		<div class="sc-search-history" v-if="history.length>0">
			<el-tag effect="dark" type="info" v-for="(item, index) in history" :key="index" @click="historyClick(item)">{{ item }}</el-tag>
		</div>
		<div class="sc-search-result" style="margin-top:30px;">
			<div class="sc-search-no-result" v-if="result==null">暂无搜索结果</div>
			<ul v-else>
				<el-scrollbar max-height="366px;" style="text-align: left;">
					<li v-for="item in result.data" :key="item.attachId">
						<div style="width: 100%;">
							<el-icon>
								<component :is="item.icon || 'el-icon-menu'"/>
							</el-icon>
							<span style="display: inline-block;font-size: 16px;font-weight: 600">{{ item.fileName }}</span>
							<div style="float: right;">大小:{{(item.fileSize/(1024*1024)).toFixed(2)}}MB</div>
						</div>
						<div v-html="item.fileContent" style="width: 100%;margin: 20px;"></div>
						<div style="padding-left:20px;padding-right: 20px;">
							<attach-menu :attachIds="item.attachId" :roleFlag="3" :preview="true"></attach-menu>
						</div>
						<div>
						</div>
					</li>
				</el-scrollbar>
			</ul>
		</div>
	</div>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'

export default {
	name: 'Full Text Search',
	components: {
		AttachMenu,
	},
	data() {
		return {
			keyword: '',
			input: "",
			result: null,
			history: [],
			sortList: [],
		}
	},
	mounted() {
		this.getHostKeywords();
	},
	methods: {
		async historyClick(item) {
			var res = await this.$API.archives.archivesRecord.searchIndex.get({keywords: item});
			if (res.code == 200) {
				this.result = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async inputChange() {
			if (this.keyword != "") {
				this.history.push(this.keyword);
				var res = await this.$API.archives.archivesRecord.searchIndex.get({keywords: this.keyword});
				if (res.code == 200) {
					this.result = res.data;
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		},
		async getHostKeywords() {
			var res = await this.$API.archives.archivesSearch.getHostKeywords.get();
			if (res.code == 200) {
				for (let i = 0; i < res.data.length; i++) {
					this.history.push(res.data[i].keyword);
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	}
}
</script>

<style scoped>
.sc-search {
}

.sc-search-no-result {
	text-align: center;
	margin: 40px 0;
	color: #999;
}

.sc-search-history {
	margin-top: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

.sc-search-history .el-tag {
	cursor: pointer;
}

.sc-search-result {
	margin-top: 15px;
	margin-left: 100px;
	margin-right: 100px;
}

.sc-search-result li {
	padding: 15px;
	background: var(--el-bg-color-overlay);
	border: 1px solid var(--el-border-color-light);
	list-style: none;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 14px;
	align-items: center;
	cursor: pointer;
}

.sc-search-result li i {
	font-size: 20px;
	margin-right: 15px;
}
</style>
